<template>
	<view
		v-show="visible"
		class="filter-floor"
		@click="popupChg(false)"
	>
		<view class="mask"></view>
		<view class="content">
			<scroll-view
				scroll-y
				class="h-full"
			>
				<view class="list">
					<view
						class="list-item flex items-center"
						v-for="(item,index) in list"
						@click.stop="onListItem(item,index)"
					>
						<image src="/static/floor.png"></image>
						<text class="">
							{{index+1}}{{item.name}}
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "filter-floor",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				list: new Array(10).fill({
					name: "楼馆藏地"
				})
			};
		},
		methods: {
			popupChg(show) {
				this.$emit('update:visible', show)
			},
			onListItem(listItem, itemIndex) {
				console.log('onListItem', listItem, itemIndex);
			}
		}
	}
</script>

<style
	lang="scss"
	scoped
>
	.filter-floor {
		--placeholder: 88rpx;
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;

		.mask {
			position: absolute;
			top: var(--placeholder);
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: calc(100% - var(--placeholder));
			background-color: rgba(0, 0, 0, 0.4);
		}

		.content {
			margin-top: var(--placeholder);
			position: relative;
			z-index: 2;
			background-color: #F6F7FB;
			height: 600rpx;

			.list {
				padding: 24rpx;

				&-item {
					margin-bottom: 24rpx;
					width: 702rpx;
					height: 160rpx;
					line-height: 160rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
					border-radius: 16rpx;

					font-size: 36rpx;
					color: #333333;

					&>image {
						width: 64rpx;
						height: 64rpx;
						margin-left: 48rpx;
					}

					&>text {
						margin-left: 48rpx;
					}
				}
			}
		}
	}
</style>